<template>
  <div class="container">
    <h1>查看全部报修单列表（待处理和已审批）</h1>

    <!-- 搜索框 -->
    <input
        v-model="searchQuery"
        placeholder="输入报修ID或用户姓名进行搜索"
        @keyup.enter="fetchRepairData"
        class="search-input"
    />
    <button @click="fetchRepairData" class="search-btn">搜索</button>

    <table v-if="repairList.length > 0" class="repair-table">
      <thead>
      <tr>
        <th>报修ID</th>
        <th>用户姓名</th>
        <th>类型</th>
        <th>标题</th>
        <th>报修时间</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="repair in repairList" :key="repair.failureRepairId">
        <td>{{ repair.failureRepairId }}</td>
        <td>{{ repair.fullName }}</td>
        <td>{{ repair.type }}</td>
        <td>{{ repair.title }}</td>
        <td>{{ repair.repairTime }}</td>
        <td>{{ repair.repairStatus }}</td>
        <td>
          <button class="edit-btn" @click="editRepair(repair)">编辑</button>
        </td>
      </tr>
      </tbody>
    </table>
    <p v-else>暂无报修记录。</p>

    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1" class="page-btn">上一页</button>
      <span>第 {{ currentPage }} 页</span>
      <button v-for="page in totalPages" :key="page" @click="goToPage(page)" class="page-btn">{{ page }}</button>
      <button @click="nextPage" :disabled="currentPage === totalPages" class="page-btn">下一页</button>
    </div>

    <!-- 自定义弹出框 -->
    <div v-if="showDialog" class="dialog-overlay">
      <div class="dialog-content">
        <h2 class="dialog-title">编辑报修单</h2>
        <form @submit.prevent="updateRepair" class="dialog-form">
          <label for="fullName">用户姓名:</label>
          <input type="text" id="fullName" v-model="selectedRepair.fullName" class="dialog-input" />

          <label for="type">类型:</label>
          <input type="text" id="type" v-model="selectedRepair.type" class="dialog-input" />

          <label for="title">标题:</label>
          <input type="text" id="title" v-model="selectedRepair.title" class="dialog-input" />

          <label for="repairTime">报修时间:</label>
          <input type="datetime-local" id="repairTime" v-model="selectedRepair.repairTime" class="dialog-input" />

          <label for="repairStatus">状态:</label>
          <select id="repairStatus" v-model="selectedRepair.repairStatus" class="dialog-select">
            <option value="待处理">待处理</option>
            <option value="已审批">已审批</option>
          </select>

          <div class="form-actions">
            <button type="submit" class="submit-btn">更新</button>
            <button type="button" class="cancel-btn" @click="closeDialog">取消</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import axios from 'axios';

const repairList = ref([]);
const selectedRepair = ref(null);
const currentPage = ref(1);
const pageSize = ref(5);
const totalPages = ref(1);
const showDialog = ref(false);
const searchQuery = ref('');

onMounted(() => {
  fetchRepairData();
});

async function fetchRepairData() {
  try {
    const response = await axios.get(`http://localhost:8080/failure-repair1/listPage`, {
      params: {
        page: currentPage.value,
        size: pageSize.value,
        query: searchQuery.value // 添加搜索查询参数
      }
    });
    repairList.value = response.data.records;
    totalPages.value = Math.ceil(response.data.total / pageSize.value);
  } catch (error) {
    console.error('获取报修数据时出错:', error);
  }
}

function editRepair(repair) {
  selectedRepair.value = { ...repair };
  showDialog.value = true;
}

function closeDialog() {
  selectedRepair.value = null;
  showDialog.value = false;
}

async function updateRepair() {
  try {
    await axios.put(`http://localhost:8080/failure-repair1/update`, selectedRepair.value);
    fetchRepairData();
    closeDialog();
  } catch (error) {
    console.error('更新报修数据时出错:', error);
  }
}

function nextPage() {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
    fetchRepairData();
  }
}

function prevPage() {
  if (currentPage.value > 1) {
    currentPage.value--;
    fetchRepairData();
  }
}

function goToPage(page) {
  currentPage.value = page;
  fetchRepairData();
}
</script>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.search-input {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 200px;
  margin-right: 10px;
}

.search-btn {
  padding: 8px 16px;
  border: none;
  background-color: #007bff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

.search-btn:hover {
  background-color: #0056b3;
}

.repair-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.repair-table th,
.repair-table td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

.repair-table th {
  background-color: #f9f9f9;
  font-weight: bold;
}

.edit-btn {
  padding: 5px 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.edit-btn:hover {
  background-color: #0056b3;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.page-btn {
  margin: 0 5px;
  padding: 8px 16px;
  border: none;
  background-color: #007bff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

.page-btn:disabled {
  background-color: #ddd;
  cursor: not-allowed;
}

.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialog-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  width: 100%;
  max-width: 600px;
}

.dialog-title {
  margin: 0 0 20px;
  font-size: 24px;
  font-weight: bold;
}

.dialog-form {
  display: flex;
  flex-direction: column;
}

.dialog-input,
.dialog-select {
  margin-bottom: 15px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form-actions {
  display: flex;
  justify-content: space-between;
}

.submit-btn,
.cancel-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.submit-btn {
  background-color: #28a745;
  color: white;
}

.submit-btn:hover {
  background-color: #218838;
}

.cancel-btn {
  background-color: #dc3545;
  color: white;
}

.cancel-btn:hover {
  background-color: #c82333;
}
</style>
